 window.addEventListener('load',function(){
    // 获取班级概览赋值
    let total = this.document.querySelector('.total') //班级人数
    let avgSalary = this.document.querySelector('.avgSalary') //期望薪资
    let avgAge = this.document.querySelector('.avgAge') //平均年龄
    let proportion = this.document.querySelector('.proportion') //男女比例

    // 1. 获取班级概览数据 --- 发起axios请求
   function bjgl(){
    axios({
        url:'/student/overview'
    })
    .then(res=>{
        // console.log(res);
        let data = res.data.data
        // 1.1 直接给班级概览数值赋值
        total.innerHTML = data.total
        avgSalary.innerHTML = data.avgSalary
        avgAge.innerHTML = data.avgAge
        proportion.innerHTML = data.proportion
    })
   }
   bjgl()

//   3. 发起动态图标的信息
axios({
    url:'/student/list'
})
.then(({data:data})=>{
    // console.log(data);
    // 3.1 创建一个数组（根据data数据要求格式） ---- 用来遍历是否有相同数据
     // let pieArr = [{ value: 1, name: '广东省' }, { value: 2, name: '湖南省' }]
    let pieArr = []
    // 4.1 （折线图） 定义数组存参 传值
    let names =[]  // 存放后台名字
    let salarys =[]  //存放后台期望薪资
    let truesalarys =[]  //存放后台实际薪资
    // 7.1 地图  --- 数值格式参照地图
    let chinaDatas = []   // 数组格式
    let chinaGeoCoordMap = {} //对象格式
    // 3.2 遍历数组--- 获取数据
    // 这里（饼形图）遍历数据 --省份和学员数量
    data.data.forEach((value,index) => {
        // 我们只需要省份值  和  学员的数量
        // 饼图数据收集--- 后面判断数组是否存在相同
        let temp = pieArr.filter(v=>{
            // 3.3 数据name值等于省份 因为是个数组 添加[0]
            return v.name === value.province
        })[0]
        // 3.4 判断省份是否在数组中存在
        if(temp){
            // 3.5 数组存在相同数据就数量添加一个
            temp.value++
        }else{
            // 3.6 如果数组没有相同数据 则给数组添加一个对象（按照data格式）
            pieArr.push({value:1,name:value.province})
        }
        // 饼图数据收集end
        // 
        //4.1  折线图数据收集 ---- 直接（data的数据是一唯数组）获取后台参数赋值到数组
        names.push(value.name)  //名字
        salarys.push(value.salary)  // 期望薪资
        truesalarys.push(value.truesalary) //实际薪资
        // 折线图数据收集 end
        // 7.2 地图数据的收集 --- 参照格式给值
        // chinaDatas.push([{name:value.province,value:0}]) //数据格式 [{name:省份,value:0}]
        // 从头到以尾遍历指定的数组，执行回调函数，将回调函数执行结果直接存储到内部数组，最终将数组返回
        // value:0 使用map方法返回的数据就是一整个 value就不用返回固定
        chinaDatas= pieArr.map(value=>{
            // 返回数据数据
            return [value]
        })
        // console.log(chinaDatas); // 数据格式 [{…}]

        chinaGeoCoordMap[value.province] = [value.jing,value.wei]  // {省份:[经,纬]}

    });
    // 根据数据生成饼图 传参(数组数据)
    createPie(pieArr)
    // 4.2  把创建的数组值进行传参
    createLine(names, salarys, truesalarys)
    // 7.3 把创建的对象值和数组值传参
    mapChart(chinaGeoCoordMap,chinaDatas)
})

//    2. 生成一个饼图
function createPie(data) {
    // 2.1  基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.pie'))

    // 2.2 指定图表的配置项和数据
    var option = {
      // 标题
      title: {
        text: '籍贯 HomeTown', // 主标题
        left: 'left' // 对齐方式
      },
      // 工具提示：鼠标进入会出现 一个提示面板
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示信息的格式
      },
      // 数据系列
      series: [
        {
          name: '各地人员分布', // 图表标题
          type: 'pie', // 图表类型
          radius: [20, 110], // 半径，用于设置图表的大小
          center: ['50%', '50%'], // 图表的对齐方式
          roseType: 'area',
          itemStyle: {
            borderRadius: 8 // 圆角
          },
          data,
        }
      ]
    }

    // 2.3 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
//   这里上面已经渲染  如果这里渲染则会空
//   createPie()

//   4. 生成一个折线图
  // names:所有姓名
  // salarys：所有期望薪资
  // truesalarys：所有的实际薪资
  function createLine(names, salarys, truesalarys) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.line'))
    // 指定图表的配置项和数据
    var option = {
    //  标题提示
      title: {
        text: '薪资 Salary'
      },

      tooltip: {
        trigger: 'axis'
      },
    //   图例： 值与series中的数据name属性值一致
      legend: {
        data: ['期望薪资', '实际薪资']
      },
    //   数据缩放
      dataZoom: [
        {
          start: 0,
          end: 100
        }
      ],
    //   图标大小
      grid: {
        left: '3%',
        right: '4%',
        bottom: '20%',
        top: '15%',
        // 大小是否包含标签刻度
        containLabel: true
      },
    //   x轴
      xAxis: {
        type: 'category',
        data: names  // 轴显示的数据
      },
    //   y轴
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '期望薪资',
          data: salarys,  // 存放数据
          type: 'line',
          smooth: true,
          symbol: 'none',
          // 设置当前系列的线的颜色
          lineStyle: {
            color: 'red',
            width: 2
          }
        },
        {
          name: '实际薪资',
          data: truesalarys, //存放数据
          type: 'line',
          smooth: true,
          symbol: 'none', // 去掉线上面那个空心的小圆点
          lineStyle: {
            color: 'blue',
            width: 2
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
//   静态渲染  上面获取后台数据赋值渲染
//   createLine()

// 5.柱形图的渲染 --- 获取每一次的成绩 --- 在传入参数进行渲染
//   5.4  按照组查询成绩---把组获取的数据传递到图标中
function getScore(batch){
    axios({
        url:'/score/batch',
        params:{batch}
    })
    .then(res=>{
        let data = res.data.data
        // console.log(data);
        // 6.2  判断后台是否有值
        if(data){
            //5.5 传参
            createBar(data)
        }
        else{
            toastr.warning('当前未添加数据')
        }
       
    })
}
getScore(1)

function createBar(data) {
    // 5.1  基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.barChart'))
    // 5.2  指定图表的配置项和数据
    var option = {
        // 提示
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      barWidth: 15,
    //   表格大小
      grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        top: '10%',
        // 大小是否包含标签刻度
        containLabel: true
      },
    //   数据
      legend: {
        data: ['平均分', '低于60分人数', '60-80分之间', '高于80分人数']
      },
    //   X轴
      xAxis: [
        {
          type: 'category',
          data: data.group, //X轴数据 //组名
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
    //   Y轴
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: '{value} 分'
          }
        },
        {
          type: 'value',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value} 人'
          }
        }
      ],
      series: [
        // 显示柱子的数量 --- 一个对象一个
        {
          name: '平均分',
          type: 'bar',
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 分'
            }
          },
          data: data.avgScore   //平均分
        },
        {
          name: '低于60分人数',
          type: 'bar',
          // 让当前数据对应着右侧的Y轴
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 人'
            }
          },
          data: data.lt60 //低于六十分
        },
        {
          name: '60-80分之间',
          type: 'bar',
           //   右侧y轴显示数据
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 人'
            }
          },
          data: data.gt60 // //60~80分之间的人数
        },
        {
          name: '高于80分人数',
          type: 'bar',
        //   右侧y轴显示数据
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 人'
            }
          },
          data: data.gt80 ////80以上的人数
        }
      ]
    }
    // 5.3  使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
//   createBar()
//  6. 按次查询成绩 柱形图右上角三个点
 let btn = this.document.querySelector('.btn')
 let batch = this.document.querySelector('#batch')
//  第二种方法 --- 遍历li传参
 let lis = this.document.querySelectorAll('#batch li')
//  6.1 显隐三个点
btn.addEventListener('click',function(e){
    // 通过判断显隐 --- 判断display(默认是block)
    if(batch.style.display === 'block'){
        batch.style.display = 'none'
    }
    else{
        batch.style.display = 'block'
    }
})

//  6.2 点击成绩 显示不同数据---传参到 getScore()中---在传值到createBar()
//  第一种方法 --- 自定义属性
// batch.addEventListener('click',function(e){
//     // 获取当前的数据值传参到getScore()中
//     // console.log(e.target.dataset.id);
//     // 判断点击的是a标签---因为自定义属性在a标签上面
//     // console.log(e.target.localName);
//     if(e.target.localName){
//         // 传参---这里可以去getScore函数中判断一下后台是否有值
//             getScore(e.target.dataset.id)
//     }
// })
//  第二种方法 --- 遍历方式
lis.forEach((value,index)=>{
    // 添加事件
    value.addEventListener('click',function(e){
        // 点击一次添加一个id值
        getScore(index + 1)
    })
})

//  7. 地图的实现
function mapChart(chinaGeoCoordMap, chinaDatas) {
    let myChart = echarts.init(document.querySelector('.map'))

    var convertData = function(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]
        var fromCoord = chinaGeoCoordMap[dataItem[0].name]
        // 指向的重点路径
        var toCoord = [101.824402,36.645924]
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value
            },
            {
              coord: toCoord
            }
          ])
        }
      }
      return res
    }
    var series = []
    // 设置指向
    ;[['广东省', chinaDatas]].forEach(function(item, i) {
      // console.log(item)
      series.push(
        {
          type: 'lines',
          color: '#00f',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5 //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 0.4, //尾迹线条透明度
              curveness: 0.3 //尾迹线条曲直度
            }
          },
          data: convertData(item[1])
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
            color: 'blue'
          },
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function(params) {
                //圆环显示文字
                return params.data.name
              },
              fontSize: 13
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            return 5 + val[2] * 0.5 //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#ff0'
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value
              ])
            }
          })
        },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: '#0f0'
              }
            },
            emphasis: {
              show: true,
              color: '#f60'
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10])
            }
          ]
        }
      )
    })

    //
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: '来粤路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function(params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = ''
          var name = params.name
          var value = params.value[params.seriesIndex + 1]
          res =
            "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
          return res
        }
      },
      backgroundColor: '#fff',
      visualMap: {
        // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    }

    myChart.setOption(option)
  }

  


 })